<!-- CustomTabBar.vue -->
<template>
	<view class="custom-tab-bar">
		<!-- 左侧按钮 -->
		<view class="tab-item" @tap="switchTab(0)">
			<image
				:src="currentIndex === 0 ? '/static/images/tabbar/home-active.png' : '/static/images/tabbar/home.png'"
				class="tab-icon"></image>
			<text class="tab-text">首页</text>
		</view>
		<view class="tab-item" @tap="switchTab(1)">
			<image
				:src="currentIndex === 1 ? '/static/images/tabbar/home-active.png' : '/static/images/tabbar/home.png'"
				class="tab-icon"></image>
			<text class="tab-text">咨询</text>
		</view>
		<!-- 中间凸起按钮 -->
		<view class="tab-item center-button" @tap="switchTab(2)">
			<image src="/static/images/tabbar/pintuan.png" class="center-icon"></image>
		</view>
		<!-- 右侧按钮 -->
		<view class="tab-item" @tap="switchTab(3)">
			<image
				:src="currentIndex === 3 ? '/static/images/tabbar/classify-active.png' : '/static/images/tabbar/classify.png'"
				class="tab-icon"></image>
			<text class="tab-text">业务</text>
		</view>
		<view class="tab-item" @tap="switchTab(4)">
			<image
				:src="currentIndex === 4 ? '/static/images/tabbar/user-active.png' : '/static/images/tabbar/user.png'"
				class="tab-icon"></image>
			<text class="tab-text">我的</text>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				currentIndex: 0 // 当前选中的 Tab 索引
			};
		},
		methods: {
			switchTab(index) {
				this.currentIndex = index;
				// 切换页面逻辑，可以使用 uni.navigateTo 或 uni.switchTab 等方法
				switch (index) {
					case 0:
						uni.reLaunch({
							url: '/pages/tabbar/home'
						});
						break;
					case 1:
						uni.reLaunch({
							url: '/pages/tabbar/user'
						});
						break;
					case 2:
						// 处理中间按钮的逻辑，例如弹出一个菜单等
						break;
					case 3:
						uni.reLaunch({
							url: '/pages/tabbar/classify'
						});
						break;
					case 4:
						uni.reLaunch({
							url: '/pages/tabbar/user'
						});
						break;
				}
			}
		}
	};
</script>

<style scoped>
	.custom-tab-bar {
		display: flex;
		justify-content: space-around;
		align-items: center;
		background-color: #ffffff;
		border-top: 1px solid #dddddd;
		/* height: 60px; */
		/* 根据实际需要调整高度 */
		position: fixed;
		bottom: 0;
		width: 100%;
		padding-bottom: constant(safe-area-inset-bottom);
		/*兼容 IOS<11.2*/
		padding-bottom: env(safe-area-inset-bottom);
		/*兼容 IOS>11.2*/
	}

	.tab-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 20%;
		padding-top: 10rpx;
	}

	.tab-icon {
		width: 24px;
		height: 24px;
	}

	.tab-text {
		font-size: 12px;
		margin-top: 6px;
		color: #666666;
	}

	.center-button {
		/* position: absolute;
		top: -20px; */
		/* 控制中间按钮凸起的位置 */
		/* width: 90rpx; */
		/* height: 90rpx; */
		/* background-color: #007AFF; */
		border-radius: 40px;
		/* 使按钮变成圆形 */
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.center-icon {
		width: 90rpx;
		height: 90rpx;
	}
</style>